<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权重</title>
    <style>
        p {
            background-color: rgb(233, 208, 208);
        }
        /* 100+1 */
        /* ！important规则最重要，大于其它规则 */
        /* 行内：1000；ID：100；类、属性、伪类：10；标签：1； */
        #box p {
            background-color: rgb(109, 133, 115);
        }
        #tag {
            background-color: rgb(167, 207, 75);
        }
        .box .tag {
            background-color: rgb(198, 124, 194);
        }
        /* 权重：1+100  显示最大权重对应规则。若权重一样，则靠后的覆盖前面的规则*/
        /* 显示此颜色 */
        div #tag {
            background-color: rgb(209, 169, 60);    
        }
        .box p {
            background-color: rgb(49, 212, 169);
        }

    </style>
</head>
<body>
    <div class="box" id="box">1111
        <p class="tag" id="tag">11111111111</p>
    </div>

</body>
</html>